<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';
import { ElMessageBox, UploadProps } from 'element-plus';

const picture = ref();
const radio1 = ref();
const value = ref();
const value2 = ref();
let options = ref([]);
const dialogFormVisible = ref(false);
const dialogVisible = ref(false);
// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});

const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage;
};

const handleSizeChange = (newSize: number) => {
    pageSize.value = newSize;
};
let params = reactive({
    pageNum: 1,
    pageSize: 100,
    title: '',
    categoryId: '',
    teacherId: '',
    name: ''
});
// 请求
const tableData = ref([]);

function getSlicelist() {
    getSlideshow(params).then((res: any) => {
        tableData.value = res.rows;
        totalItems.value = res.total;
        // console.log(res);
    });
}

getSlicelist();

getArticle(params).then(res => {
    // options.value=res.rows
    options.value = res.rows.map(item => {
        return {
            value: item.title,
            label: item.id
        };
    });
    // console.log(options.value);
});
//删除
import { ElMessage } from 'element-plus';
import { getAddslide, getArticle, getChangeslide, getDelslide, getSlideshow } from '@/api/interface/http1';
import { getToken } from '@/utils/auth';
import { Switch } from '@element-plus/icons-vue';

const open = (row: any) => {
    ElMessageBox.confirm(
        '此操作将永久删除该文件，是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            let params = row.id;
            getDelslide(params).then(res => {
                // console.log(res);
                getSlicelist();
            });
            ElMessage({
                type: 'success',
                message: '已成功删除'
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            });
        });
};
//开关
// const value1 = ref(true);
const url = 'http://192.168.5.120:8090';
let data = reactive<any>({
    url: '',
    picture: '',
    enable: '',
    operationType: 1,
    operationId: '',
    id: '',
    title: ''
});
const open2 = (item: any) => {
    // console.log(item.enable);
    if (item.enable === '1') {
        item.enable = 0;
        data.id = item.id;
        data.operationId = item.operationId;
        data.picture = item.picture;
        data.enable = item.enable;
        getChangeslide(data).then(res => {
            // console.log(res);
            if (res.code === 200) {
                getSlicelist();

            }
        });
    } else {
        item.enable = 1;
        data.id = item.id;
        data.operationId = item.operationId;
        data.picture = item.picture;
        data.enable = item.enable;
        getChangeslide(data).then(res => {
            console.log(res);
            if (res.code === 200) {
                getSlicelist();
            }
        });
    }
    ElMessage({
        message: '更改状态成功！',
        type: 'success'
    });
};

// 添加
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const avatarUploadUrl = baseUrl + '/common/upload';
const imageUrl = ref('');
const headers = ref({
    'Authorization': 'Bearer ' + getToken()
});

function change(e: any) {
    // console.log(e);
    data.operationId = e.label;
    // data.title = e.value;
}

function changeExit(e) {
    // console.log(e);
    data.operationId = e;
}
function handleChange(item){
    // console.log(item);
    data.title=item.value
    // console.log(data.title);
}
const addSlide = () => {
    dialogFormVisible.value = false;
    // data.title=value.value
    data.enable="1"
    getAddslide(data).then(res => {
        // console.log(res);
        // console.log(data.title);
        tableData.value.push(data);
        getSlicelist();
        ElMessage({
            type: 'success',
            message: '添加成功！'
        });
    });
    value.value = '';//清空输入框上传框
    imageUrl.value = '';
    picture.value = '';
};
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    data.picture = response.url;
    imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片必须为JPG格式!');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 10) {
        ElMessage.error('Avatar picture size can not exceed 10MB!');
        return false;
    }
    return true;
};
// 编辑
const changeSlide = (index:number,row: any) => {
    dialogVisible.value = true;
    // data.id = tableData.value[index].id;
    data.id = row.id;
    data.picture = row.picture;
    data.title=row.title
    // value2.value = options.value[index].value
    // console.log(row);
    // console.log(row.id);
    // console.log(data.id);
    // console.log(row.picture);
    // console.log(options.value[index].value);
};
// 编辑保存
const Savechange = () => {
    dialogVisible.value = false;
    // console.log(data);
    getChangeslide(data).then(res => {
        if (res.code === 200) {
            getSlicelist();
            ElMessage({
                type: 'success',
                message: '编辑成功！'
            });
        }
    });
};
</script>

<template>
    <div>
        <div class='add'>
            <el-button type='primary' @click='dialogFormVisible = true'>
                <span>添加</span>
            </el-button>
            <el-dialog v-model='dialogFormVisible' title='添加' width='616'>
                <div class='slide'>
                    <label for='' style='vertical-align:top;'>封面图片</label>
                    <el-upload
                        v-model='picture'
                        class='avatar-uploader'
                        :action='avatarUploadUrl'
                        :show-file-list='false'
                        :headers='headers'
                        :on-success='handleAvatarSuccess'
                        :before-upload='beforeAvatarUpload'
                    >
                        <img v-if='imageUrl' :src='imageUrl' class='avatar' />
                        <el-icon v-else class='avatar-uploader-icon'>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
                <div class='slide'>
                    <el-radio-group v-model='radio1' class='ml-4'>
                        <el-radio value='1' size='large'>内链</el-radio>
                    </el-radio-group>
                </div>
                <div class='slide'>
                    <label for=''>选择跳转文章：</label>
                    <el-select
                        v-model='value'
                        placeholder='请选择'
                        size='large'
                        style='width: 240px'
                        placement='top'
                        @change='change'
                    >
                        <el-option
                            v-for='item in options'
                            :key='item.value'
                            :label='item.value'
                            :value='item'
                            @click='handleChange(item)'
                        />
                    </el-select>
                </div>
                <template #footer>
                    <div class='dialog-footer'>
                        <el-button @click='dialogFormVisible = false'>取消</el-button>
                        <el-button type='primary' @click='addSlide'>
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class='section'>
            <el-table :data='paginatedData' border style='width: 100%;'>
                <!--            <el-table-column prop="serialNumber" label="序号" width="100" />-->
                <el-table-column type='index' width='100' label='序号' />
                <el-table-column label='轮播图片' >
                    <template #default='scope'>
                        <img :src='url+scope.row.picture' alt='加载失败'>
                    </template>
                </el-table-column>
                >
                <el-table-column prop='' label='方式' >
                    <template #default>
                        内链
                    </template>
                </el-table-column>
                <el-table-column label='状态' >
                    <template #default='scope'>
                        <!--                    <el-button :plain='true' style='border: none'>-->
                        <!--                        {{scope.row.enable}}-->
                        <el-switch
                            @click='open2(scope.row)'
                            :model-value='scope.row.enable==="1"'
                        >
                        </el-switch>
                        <!--                    </el-button>-->
                    </template>
                </el-table-column>
                <el-table-column prop='updateTime' label='更新时间'  />
                <el-table-column label='操作' width='200'>
                    <template #default='scope'>
                        <el-button plain @click='changeSlide(scope.$index,scope.row)'
                                   style='background-color: transparent;border: none;color: #409EFF;width: 25px'>
                            <span style='font-size: 12px'>编辑</span>
                        </el-button>
                        <el-button plain @click='open(scope.row)' style='background-color: transparent;border: none;color: #409EFF;width: 25px'><span
                            style='font-size: 12px'>删除</span>
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model='dialogVisible' title='编辑' width='616'>
                <div class='slide'>
                    <label for='' style='vertical-align:top;'>封面图片</label>
                    <el-upload
                        class='avatar-uploader'
                        :action='avatarUploadUrl'
                        :show-file-list='false'
                        :headers='headers'
                        :on-success='handleAvatarSuccess'
                        :before-upload='beforeAvatarUpload'
                    >
                        <img v-if='data.picture' :src='baseUrl+data.picture' class='avatar' />
                        <el-icon v-else class='avatar-uploader-icon'>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
                <div class='slide'>
                    <el-radio-group v-model='radio1' class='ml-4'>
                        <el-radio value='1' size='large'>内链</el-radio>
                    </el-radio-group>
                </div>
                <div class='slide'>
                    <label for=''>选择跳转文章：</label>
                    <el-select
                        v-model='data.title'
                        placeholder='请选择'
                        size='large'
                        style='width: 240px'
                        placement='top'
                        @change='changeExit'
                    >
                        <el-option
                            v-for='item in options'
                            :key='item.value'
                            :label='item.value'
                            :value='item.label'
                        />
                    </el-select>
                </div>
                <template #footer>
                    <div class='dialog-footer'>
                        <el-button @click='dialogVisible = false'>取消</el-button>
                        <el-button type='primary' @click='Savechange'>
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class='footer'>
            <el-pagination background @sizeChange='handleSizeChange' @currentChange='handleCurrentChange'
                           :current-page='currentPage' :page-sizes='[10, 20, 30, 40]' :page-size='pageSize'
                           :total='totalItems'>
            </el-pagination>
        </div>
    </div>
</template>

<style scoped lang='less'>
.add {
    margin-left: 40px;
    margin-top: 40px;

    button {
        width: 70px;
        height: 36px;
    }

    :deep(.el-dialog__header) {
        text-align: left;
        width: 616px;
        background-color: rgb(24, 146, 255);

        .el-dialog__title {
            color: white;
        }

        svg {
            color: white;
        }
    }
}

.section {
    padding: 0px 20px;
    margin-top: 40px;
    margin-bottom: 30px;

    :deep(.el-table__row) {
        height: 127px;

        td {
            text-align: center;

            img {
                width: 100%;
                height: 100px;
            }
        }
    }

    :deep(.cell) {
        //height: 27px;
        line-height: 27px;
        text-align: center;
    }

    :deep(.el-table_1_column_7) {
        color: #00AEF3;
    }

    :deep(.el-dialog__header) {
        text-align: left;
        width: 616px;
        background-color: rgb(24, 146, 255);

        .el-dialog__title {
            color: white;
        }

        svg {
            color: white;
        }
    }

    .contentTree {
        margin: auto;
        margin-top: 30px;
        width: 700px;
        background-color: #eeeeee;
        text-align: left;
    }
}

.footer {
    float: right;
    margin-bottom: 30px;
    margin-right: 30px;
}


//添加
.avatar-uploader {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 20px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploader-icon {
    border: 1px solid #cccccc;
    //border-radius: 7px;
}

.slide {
    margin-left: 50px
}
</style>
